<template>
  <div class="header">
    <slot>
      <h1 name="title">{{ title }}</h1></slot
    >
    <div class="input-group">
      <input
        type="text"
        class="form-control"
        :placeholder="placeholder"
        v-model="todo"
        ref="todoRef"
        autofocus
        @keyup.enter="handleAddTodos"
      />
      <div
        class="input-group-addon"
        @click="handleAddTodos"
      >
        {{ btnText }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      todo: ''
    }
  },
  props: {
    title: {
      type: String,
      default: '标题'
    },
    btnText: {
      type: String,
      default: '确认'
    },
    placeholder: {
      type: String,
      default: '请输入待办事项，按enter添加'
    }
  },
  methods: {
    handleAddTodos() {
      // 如果没有输入内容终止代码执行
      if (!this.todo) return
      // 通过子传父的方式给父组件传递添加的todo
      this.$emit('click', this.todo)
      // 情况输入框
      this.todo = ''
      // 自动获取焦点
      this.$refs.todoRef.focus()
    }
  }
}
</script>
<style lang="scss" scoped></style>
